<template>
  <div style="background: #fff">
    <div class="text-title">基本信息</div>
    <a-descriptions bordered class="desc-table" :column="{ sm: 2, xs: 1 }">
      <a-descriptions-item>
        <template #label>
          <span>{{ $L("项目名称") }}</span>
        </template>
        {{ detail.name }}
      </a-descriptions-item>
      <a-descriptions-item>
        <template #label>
          <span>{{ $L("项目简称") }}</span>
        </template>
        {{ detail.short_name }}
      </a-descriptions-item>
      <a-descriptions-item :span="2">
        <template #label>
          <span>{{ $L("项目简介") }}</span>
        </template>
        {{ detail.describe || "无" }}
      </a-descriptions-item>
      <a-descriptions-item label="所属地区" :span="2">
        {{ detail.district_txt }}
      </a-descriptions-item>
      <a-descriptions-item label="详细地址" :span="2">
        {{ detail.address }}
      </a-descriptions-item>
      <a-descriptions-item label="管理面积（㎡）">
        {{ detail.management_area }}
      </a-descriptions-item>
      <a-descriptions-item label="可招商面积（㎡）">
        {{ detail.rentable_area }}
      </a-descriptions-item>
      <a-descriptions-item>
        <template #label>
          <span>{{ `总${$L("房源")}数量（间）` }}</span>
        </template>
        {{ detail.room_count }}
      </a-descriptions-item>
      <a-descriptions-item>
        <template #label>
          <span>{{ `可招商${$L("房源")}数量（间）` }}</span>
        </template>
        {{ detail.room_rentable_count }}
      </a-descriptions-item>
      <a-descriptions-item label="项目类型">
        {{ detail.type_txt || "无" }}
      </a-descriptions-item>
      <template v-if="detail.extra_config">
        <a-descriptions-item label="排序值">
          {{ detail.sort || "无" }}
        </a-descriptions-item>
        <a-descriptions-item label="竣工时间">
          {{ detail.extra_config.completedTime || "无" }}
        </a-descriptions-item>
        <a-descriptions-item label="标准层高">
          {{ detail.extra_config.floor_height || "无" }}
        </a-descriptions-item>
        <a-descriptions-item label="物业">
          {{ detail.extra_config.ownerName || "无" }}
        </a-descriptions-item>
        <a-descriptions-item label="物业费">
          {{ detail.extra_config.ownerCost || "无" }}
        </a-descriptions-item>
        <a-descriptions-item label="车位数量">
          {{ detail.extra_config.parkingNumber || "无" }}
        </a-descriptions-item>
        <a-descriptions-item label="车位月租金">
          {{ detail.extra_config.parkingMonthlyRent || "无" }}
        </a-descriptions-item>
        <a-descriptions-item label="空调">
          {{ detail.extra_config.airConditioner || "无" }}
        </a-descriptions-item>
        <a-descriptions-item label="空调费">
          {{ detail.extra_config.airConditionerCost || "无" }}
        </a-descriptions-item>
        <a-descriptions-item label="空调开放时间">
          {{ detail.extra_config.airConditionerTime || "无" }}
        </a-descriptions-item>
        <a-descriptions-item label="电梯">
          {{ detail.extra_config.elevator || "无" }}
        </a-descriptions-item>
        <a-descriptions-item label="网络">
          {{ detail.extra_config.network || "无" }}
        </a-descriptions-item>
        <a-descriptions-item label="入驻企业">
          {{ detail.extra_config.settledEnterprise || "无" }}
        </a-descriptions-item>
        <a-descriptions-item label="招商岗位">
          {{
            detail.extra_config.post_id ? detail.extra_config.post_txt : "无"
          }}
        </a-descriptions-item>
        <a-descriptions-item label="招商部门">
          {{
            detail.extra_config.department_id
                ? detail.extra_config.department_txt
                : "无"
          }}
        </a-descriptions-item>
      </template>
      <a-descriptions-item label="VR链接">
        {{ detail.vr_link || "无" }}
      </a-descriptions-item>
      <a-descriptions-item label="招商时间" v-if="detail.extra_config">
        {{ detail.extra_config.attractInvestmentTime || "无" }}
      </a-descriptions-item>

      <a-descriptions-item
        label="3D可视化模型"
        :span="2"
        v-if="detail.three_dimensional_file"
      >
        <a-button type="link">去编辑</a-button>
      </a-descriptions-item>
      <a-descriptions-item
        label="2D鸟瞰图"
        :span="2"
        v-if="detail.dimensional_bg_img"
      >
        <a-button
          type="link"
          style="padding: 0; margin: 0"
          @click="showVisualPicEdit"
        >
          绘制点击区域
        </a-button>
        <a-tooltip>
          <template #title
          >通过绘制的点击区域和区域设置的类型,可查该区域的详情数据</template
          >
          <QuestionCircleOutlined style="color: #999; margin-left: 5px" />
        </a-tooltip>
        <a-button
          type="link"
          style="padding: 0; margin: 0 0 0 30px"
          @click="toVisualModulesEdit"
        >
          自定义数据组件
        </a-button>
        <a-tooltip>
          <template #title>可自定义页面中展示指定jp数据统计信息</template>
          <QuestionCircleOutlined style="color: #999; margin-left: 5px" />
        </a-tooltip>
      </a-descriptions-item>
      <a-descriptions-item
        :span="2"
        label="图片"
        v-if="detail.extra_config && detail.extra_config.iamges"
      >
        <template v-if="detail.extra_config.iamges.length">
          <a-image
            v-for="(image, index) in detail.extra_config.iamges"
            :key="index"
            :width="200"
            :src="image"
            style="padding: 10px"
          />
        </template>
        <span v-else>无</span>
      </a-descriptions-item>
    </a-descriptions>

    <div class="drawer-footer">
      <a-row justify="space-between">
        <a-col>
          <a-button @click.prevent="handleClose">关闭</a-button>
        </a-col>
        <a-col>
          <a-space :size="25">
            <a-button
              danger
              ghost
              v-if="showDel"
              @click="deleteVillageClick(detail.id)"
              v-permission="['villageList', 'curd', 'delete']"
            >
              删除
            </a-button>
            <a-button
              v-permission="['villageList', 'curd', 'edit']"
              type="primary"
              @click.prevent="toEdit"
            >去编辑</a-button>
          </a-space>
        </a-col>
      </a-row>
    </div>

    <DrawClickableArea
      :visible="visualPicEditVisible"
      :id="detail.id"
      :bgImgUrl="detail.dimensional_bg_img"
      @onClose="visualPicEditVisible = false"
    />
  </div>
</template>

<script>
import { defineComponent, ref, watch, createVNode } from "vue";
import request from "@/common/utils/request";
import { Modal } from "ant-design-vue";
import {
  ExclamationCircleOutlined,
  QuestionCircleOutlined,
} from "@ant-design/icons-vue";
import DrawClickableArea from "@/views/village/ProjectManage/modules/DrawClickableArea.vue";
import {useRoute} from "vue-router";
export default defineComponent({
  name: "ProjectDetailContent",
  components: { QuestionCircleOutlined, DrawClickableArea },
  props: {
    id: {
      type: [String, Number],
      default: 0,
    },
    showDel: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    const $route = useRoute();
    // 当前选中tab
    const TAB_KEYS = ["basic"];

    const activeTabKey = ref(TAB_KEYS[0]);
    const mainAppParamsId = window?.microApp?.getData()?.id;

    const detail = ref({});
    const getDetail = () => {
      request
        .get("/village", "/project/manage/get", {
          id: props.id || mainAppParamsId,
        })
        .then((res) => {
          detail.value = res.list;
        });
    };

    const handleClose = () => {
      if (window?.microApp?.getData()?.isMainDrawer) {
        window?.microApp?.getData()?.closeDrawer();
      } else {
        context.emit("handleClose");
      }
    };
    const toEdit = () => {
      let id = props.id || mainAppParamsId;
      if (window?.microApp?.getData()?.isMainDrawer) {
        // 去编辑
        window.microApp.forceDispatch({
          type: "SetMicroPages",
          microInfo: {
            microId: 'projectEditInOrg',
            app: 'org',
            name: '编辑项目',
            url: `/village/villageEdit?id=${id}`,
          }
        }, () => {
          window?.microApp?.getData()?.closeDrawer();
        })
      } else {
        context.emit("toEdit", { id: id});
      }
    };

    // 删除项目
    const deleteVillageClick = (id) => {
      Modal.confirm({
        title: () => "确认删除该项目吗?",
        icon: () => createVNode(ExclamationCircleOutlined),
        centered: true,
        onOk() {
          request.del("/village", "/project/manage", { id }).then((res) => {
            context.emit("deleteCancel");
          });
        },
      });
    };

    const visualPicEditVisible = ref(false);

    const showVisualPicEdit = () => {
      visualPicEditVisible.value = true;
    };

    const toVisualModulesEdit = () => {
      let url = '/main/dataVisualization/synthetical?type=edit';
      window.open(
        `${location.origin}/orgs/#/index?url=${encodeURIComponent(url)}&app=org&from=iframe`
      );
    };

    const init = () => {
      getDetail();
    };

    init();

    return {
      TAB_KEYS,
      activeTabKey,
      detail,
      handleClose,
      toEdit,
      deleteVillageClick,
      visualPicEditVisible,
      showVisualPicEdit,
      toVisualModulesEdit,
    };
  },
});
</script>

<style lang="less" scoped>
.desc-table {
  margin-top: 10px;
  :deep(.ant-descriptions-view table) {
    table-layout: fixed;
  }
}
</style>
